{% extends 'base.html' %}
{% block title %}  - Edit All Users Profile details{% endblock %}

{% block content %}
<script>
	var old_tools = new Array();
	var old_skills = new Array();
	var old_tags = new Array();

	{% for x in old_tools %}
	old_tools.push({{x}});
	{% endfor %}
	{% for x in old_skills %}
	old_skills.push({{x}});
	{% endfor %}
	{% for x in old_tags %}
	old_tags.push({{x}});
	{% endfor %}

	function check_img(img_form){
		var location = img_form.photo.value;
		if (location == "") return true;

		var point = location.lastIndexOf(".");
		var type = location.substr(point);

		if(type==".jpg"||type==".gif"||type==".JPG"||type==".GIF"||type==".PNG"||type==".png"
		||type==".BMP"||type==".bmp"){
			return true;
		}else{
			alert("Please chose image in format : jpg png gif");
		}

		return false;
	}

	/* When select a different user, goto that user's web page. */
	function jump_user(){
		window.location.href = "/user/edit/all/?cu=" + document.getElementById('chosen_artist').value;
	}

	/* Show the respect tools, skills, and tags. */
	function show_array(_array, old_array, old_array_name , _html_id){
		var _html = "";		
		for (var i=0;i<_array.length;i++){
			if (_array[2*i]){
				_html += "<input type='checkbox' value ='"+_array[2*i]+"' onmousedown=\"if(this.checked) remove_skt("
				+ _array[i*2]+",'" + _array[i*2+1] + "', " + old_array_name + "); else show_skt("
				+ _array[i*2]+",'" + _array[i*2+1] +"', "+old_array_name+");\"";
				
				for (var j = 0;j<old_array.length; j++){
					if (old_array[j] == _array[i*2])
					_html += " checked='true' ";
				}
				
				_html += ">" + _array[i*2+1] + "<br/>";				
			}
		}		
		document.getElementById(_html_id).innerHTML = _html;
	}

	/* Show all the skills, tools and tags grouped by categories. */
	function show_skill_tool_tag(tools, skills, tags){
		show_array(tools, old_tools,'old_tools', '_tools');
		show_array(skills, old_skills,'old_skills', '_skills');
		show_array(tags, old_tags,'old_tags', '_tags');
	}

	function show_skt(_id, _name, _array){
		push(_array, _id);
		_final_s_t_t();
	}

	function remove_skt(_id,_name,_array){
		_remove(_id,_array);
		_final_s_t_t();
	}

	/*Process with unselect skills, tools, tags.*/
	function _remove(_id, _array){
		for (i=0;i<_array.length;i++){
			if (_array[i]==_id){
				_array[i] = _array[_array.length - 1];
				_array.pop();
			}
		}
	}

	function push(_array, val){
		for (var i=0;i<_array.length;i++){
			if (_array[i]==val)
			return;
		}

		_array.push(val);
	}

	function check_all( tools, skills, tags){
		for (var i=0;i<skills.length/2;i++){
			push(old_skills, skills[i*2]);
		}

		for (var i=0;i<tools.length/2;i++){
			push(old_tools, tools[i*2]);
		}

		for (var i=0;i<tags.length/2;i++){
			push(old_tags, tags[i*2]);
		}

		// All check.
		show_skill_tool_tag(tools, skills, tags);
		_final_s_t_t();
	}

	function uncheck_all(tools, skills, tags){
		for (var i=0;i<skills.length/2;i++){
			_remove(skills[i*2], old_skills);
		}

		for (var i=0;i<tools.length/2;i++){
			_remove(tools[i*2], old_tools);
		}

		for (var i=0;i<tags.length/2;i++){
			_remove(tags[i*2], old_tags);
		}

		// All uncheck.
		show_skill_tool_tag(tools, skills, tags);
		_final_s_t_t();
	}

	/* Generate the final input skills, tools, tags. */
	function _final_s_t_t(){
		var tag_html = "";
		var tool_html = "";
		var skill_html = "";
		for(var i=0;i<old_tools.length;i++){
			tool_html += "<input checked='true' type='checkbox' name='final_tool' value='" + old_tools[i] +"'>";
		}

		for(var i=0;i<old_skills.length;i++){
			skill_html += "<input checked='true' type='checkbox' name='final_skill' value='" + old_skills[i] +"'>";
		}

		for(var i=0;i<old_tags.length;i++){
			tag_html += "<input checked='true' type='checkbox' name='final_tag' value='" + old_tags[i] +"'>";
		}

		document.getElementById('_final').innerHTML = tool_html + skill_html + tag_html;
	}

</script>


<div id="content" style="position:absolute; top:20px; left:0px; width:610px; height:relative; background-color: #1A1A1A; layer-background-color: #1A1A1A; border: 1px none #000000;">
<form enctype="multipart/form-data" method="post" action="/user/edit/all/" onsubmit="return check_img(this);">	
<table width="610">
  		<tr>
  		  <td colspan="2"><p><span style="font-size:14px;color:#CCC">Edit user profile</span></p></td>
        </tr>
	<tr>
	<th>Select user:</th>
	<td><select name="select_user" width="15" id="chosen_artist" onchange="return jump_user();">
		{% for art in artists %}
		<option value="{{art.id}}" {% if art.id == cu.id %}selected="true"{% endif %}>{{art.first_name}} {{art.last_name}}</option>
		{% endfor %}
	</select>
    </td> 
	</tr>


		
		{% for field in form %}
		{% if field.html_name != 'password' %}
		<tr>
			<th>{{field.html_name}}</th>
			<td>{{field}}</td>
		</tr>
		{% endif %}
		{% endfor %}
		        <tr>
        	<td colspan="3">
        	</td>
        </tr>
        <tr>
			<th>Company:</th>
			<td><input type="text" name="company" value="{{cu.get_profile.company}}"></td>
		</tr>
        <tr>
			<th>Office:</th>
			<td><input type="text" name="office" value="{{cu.get_profile.office}}"></td>
		</tr>
        <tr>
			<th>Job title:</th>
			<td>
				<input type="hidden" name="c_u_id" value="{{cu.id}}"/>
				<input type="text" name="role" value="{{cu.get_profile.role}}">
			</td>
	
			<th width="100">Phone:</th>
			<td><input type="text" name="phone" value="{{cu.get_profile.phone}}"></td>
		</tr>
       	<tr>
			<th>Address:</th>
			<td><input type="text" name="address" value="{{cu.get_profile.address}}"></td>
            
        	<th>URL:</th>
            <td><input type="text" name="link" value="{{cu.get_profile.link}}"></td>
		</tr>
        <tr>
        	<td colspan="4">
        	</td>
        </tr>
		<tr>
			<th>Rate:</th>
		  <td colspan="3"><input type="text" name="rate" value="{{cu.get_profile.rate}}"> 
			</td>
		</tr>
        <tr>
			<th>Unavailable:</th>
			<td colspan="3"><input name="exp_start" type="text" value="{% if user_expire.start %}{{user_expire.start}}{% endif %}" size="10"> ->	<input name="exp_end" type="text" value="{% if user_expire.end %}{{user_expire.end}}{% endif %}" size="10"> (YYYY-MM-DD)</td>
		</tr>   
        <tr>
        	<td colspan="4">
        	</td>
        </tr>

		<tr>
			<th>Language:</th>
			<td><input type="text" name="language" value="{{cu.get_profile.language}}"></td>
            
            <th> Note:</th>
			<td><form action="/user/note/{{cu.id}}/?url=/user/edit/all/?cu={{cu.id}}" method="post">
				<input name="note" maxlength="100" type="text" value="{{cu.get_profile.note}}"/>
			</form>
			</td>    
		</tr>
		<tr>
			<th>Photo:</th>
			<td><input name="photo" type="file" id="photo" size="10">
		  </td>

			<th>Special skills:</th>
			<td><form action="/user/customer_skills/{{cu.id}}/?url=/user/edit/all/?cu={{cu.id}}" method="post">
				<input name="customer_skills" maxlength="100" type="text" value="{{cu.get_profile.customer_skills}}"/>
				</form>
			</td>
		</tr>	
  </table>
    

	<div style="float:left;left:2px;WIDTH:290px;HEIGHT:190px;word-wrap:break-word;OVERFLOW:auto;overflow-x:hidden;border:1px solid #7e7d68;top:40px;scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF;scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222;scrollbar-arrow-color: #222222">
		<div style="position:relative;left:5px;top:5px;">
		<table width="284">
        <tr><th>
        <b>Category</b><br />
        </th></tr>
        <tr><td>
            {% for x in skts %}
			<input type="checkbox" name="c_a_t_radio" value="{{x.category.id}}"
			onmousedown="show_skill_tool_tag([{% for y in x.tools %}'{{y.id}}','{{y.name}}',{% endfor %}],
				[{% for y in x.skills %}'{{y.id}}','{{y.name}}',{% endfor %}],
				[{% for y in x.tags %}'{{y.id}}','{{y.name}}',{% endfor %}]);"
			{% if x.category.id in cids %}
			checked="true"
			{% endif %}
			/>
			<a href="#end" onclick="show_skill_tool_tag([{% for y in x.tools %}'{{y.id}}','{{y.name}}',{% endfor %}],
				[{% for y in x.skills %}'{{y.id}}','{{y.name}}',{% endfor %}],
				[{% for y in x.tags %}'{{y.id}}','{{y.name}}',{% endfor %}]);">
				{{x.category.name}}
			</a><br/>
			{% endfor %}
            </td></tr>
            </table>
		</div>
	</div>



	<div style="float:left;WIDTH:290px;HEIGHT:190px;word-wrap:break-word;OVERFLOW:auto;overflow-x:hidden;border:1px solid #7e7d68;scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF;scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222;scrollbar-arrow-color: #222222">
			<table width="284">
        	<tr><th>
            <b>Skills</b> 
            </tr></th>
            <tr><td>
        <div style="position:relative;left:5px;top:5px;">

			<div id="_skills"></div>
		</div><br/>

		<div style="position:relative;left:5px;top:5px;">
        
            <tr><th>        
			<b>Tools</b>
            </tr></th>
            <tr><td>
			<div id="_tools"></div>
		</div><br/>

		<div style="position:relative;left:5px;top:5px;display:none">
			<b>Tags</b> <br/><br/>
			<div id="_tags"></div>
		</div>
            </tr></th>
    </table>
	</div>

	<div style="display:none" id="_final">
	</div>
  <p><br/>
		 <input type="submit" value="Save " />
	</p>
</form>


<div align="center" id="content" style="position:absolute; top:-2px; left:345px; width: 240; height: 250; overflow: hidden;">
	<img src="/upload/user/{{cu.get_profile.photo}}" height=100%>
</div>



<p><a name="end" id="end"></a></p>
</div>


{% endblock %}